﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery Plugin -- jTagging Demo</TITLE>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<STYLE>BODY {
	FONT-SIZE: 1em; FONT-FAMILY: Tahoma, arial, sans-serif
}
A {
	COLOR: #00f
}
A:hover {
	COLOR: #fff; BACKGROUND-COLOR: #00f
}
H1 {
	FONT-SIZE: 3em; MARGIN: 0px; COLOR: #ff8e28
}
TD.nav {
	FONT-SIZE: 1.6em; BACKGROUND-COLOR: #eee
}
DIV.input {
	BORDER-RIGHT: #c3d9ff 5px solid; PADDING-RIGHT: 10px; BORDER-TOP: #c3d9ff 5px solid; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: #c3d9ff 5px solid; COLOR: #000; PADDING-TOP: 10px; BORDER-BOTTOM: #c3d9ff 5px solid; BACKGROUND-COLOR: #fff
}
DIV.input H4 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #c3d9ff 1px solid
}
DIV.input P {
	COLOR: #444
}
DIV.input P SPAN {
	COLOR: #ccc
}
DIV.box {
	BORDER-RIGHT: #5ab500 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #5ab500 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 5px; BORDER-LEFT: #5ab500 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #5ab500 1px solid; BACKGROUND-COLOR: #e6f7d4
}
</STYLE>

<SCRIPT src="jQuery.js" 
type=text/javascript></SCRIPT>

<SCRIPT src="jQuery.jTagging.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
$(document).ready(function(){
	$("#TagText1").jTagging($("#TagDiv1"), ",");
	var tagDivList = new Array($("#TagDiv3"), $("#TagDiv4"));
	var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" };
	var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"};
	var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"};
	$("#TagText2").jTagging(tagDivList, " ", normalClass, selectedClass, normalHoverClass);
});
</SCRIPT>

<META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=5 width=778 align=center border=0>
  <TBODY>
  <TR>
    <TD class=nav noWrap>jQuery Plugin -- jTagging Demo</TD>
    <TD class=nav noWrap align=right><A href="http://jquery.com/"><IMG 
      src="jq.png" 
  border=0></A></TD></TR>
  <TR>
    <TD colSpan=2>
      <DIV class=input>
      <H4>Demo1</H4>
      <P>your tags: <INPUT id=TagText1 size=65> comma separated</P>
      <P><SPAN>*try to enter a tag in the tag list</SPAN></P>
      <DIV class=box id=TagDiv1><A onClick="return false;" 
      href="http://www.hotajax.cn">javascript</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">jquery</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">tag</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">cool</A>      </DIV></DIV>
      <P>&nbsp;</P>
      <DIV class=input>
      <H4>Demo2</H4>
      <P>website: <INPUT id=TagText2 size=65 value=dianping> space separated</P>
      <DIV class=box id=TagDiv3><A onClick="return false;" 
      href="http://www.hotajax.cn">Google</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">Yahoo</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">MSN</A> </DIV>
      <DIV class=box id=TagDiv4><A onClick="return false;" 
      href="http://www.hotajax.cn">yelp</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">judysbook</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">dianping</A>&nbsp;&nbsp;<A 
      onclick="return false;" 
      href="http://www.hotajax.cn">Zagat</A>      </DIV></DIV></TD></TR></TBODY></TABLE>
</BODY></HTML>
